<template>
    <el-dialog class="dialogTotal" :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
        :close-on-press-escape="false" @close="cancel">
        <el-form :disabled="isdisabled" class="formTotal" ref="userDetailFrom" :model="addform" label-width="100px"
            label-position="right" :rules="userRules">
            <el-form-item label="姓名" prop="cooperation_name">
                <el-input v-model="addform.cooperation_name" class="formWidth"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
                <el-input v-model="addform.nickname" class="formWidth"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="cooperation_sex">
                <el-radio v-model="addform.cooperation_sex" label="0">男</el-radio>
                <el-radio v-model="addform.cooperation_sex" label="1">女</el-radio>
            </el-form-item>
            <el-form-item label="合作公司" prop="partner_company_id">
                <el-select v-model="addform.partner_company_id" class="formWidth">
                    <el-option v-for="item in firmList" :key="item.id" :label="item.partner_company_name"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="手机号" prop="cooperation_phone">
                <el-input v-model="addform.cooperation_phone" class="formWidth"></el-input>
            </el-form-item>
            <el-form-item label="微信号" prop="cooperation_wx_num">
                <el-input v-model="addform.cooperation_wx_num" class="formWidth"></el-input>
            </el-form-item>
            <el-form-item label="身份" prop="cooperation_id_num">
                <el-select v-model="addform.cooperation_id_num" class="formWidth">
                    <el-option v-for="item in cooperationList" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remarks">
                <el-input v-model="addform.remarks" type="textarea" :autosize="{ minRows: 3 }"
                    class="formWidth"></el-input>
            </el-form-item>
            <el-form-item label="个人照" prop="individual_img">
                <el-upload :action="fileUrl" :limit="5" :on-success="sucessImg" :on-error="errorImg"
                    accept=".png,.jpg,.jpeg" :file-list="imgFileList" :http-request="uploadHttp" list-type="picture"
                    :on-remove="deleteImg" :show-file-list="true" :before-upload="beforeImg">
                    <div class="uploadDiv" v-if="!isdisabled && imgFileList.length != 5">
                        <i class="el-icon-plus"></i>
                    </div>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="saveUsser" :disabled="isdisabled">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import util from '../../utils/request';
import rulesPattern from '@/utils/rules';
export default {
    computed: {
        fileUrl() {
            return util.defaults.baseURL + 'api/uploadFile'

        }

    },
    props: {
        firmList: {
            type: Array,
            // default:()=>[]
        }
    },
    data() {
        return {
            title: '新增合作人员',
            dialogFormVisible: false,
            cooperationList: [
                {
                    label: '管家',
                    value: '0'
                },
                {
                    label: '督导',
                    value: '1'
                },
                {
                    label: '化妆师',
                    value: '2'
                },
                {
                    label: '管家领导',
                    value: '3'
                },
                {
                    label: '店总',
                    value: '4'
                },
            ],
            addform: {
                cooperation_name: '',
                nickname: '',
                cooperation_sex: '0',
                partner_company_id: '',
                cooperation_phone: '',
                cooperation_wx_num: '',
                cooperation_id_num: '',
                remarks: '',
                individual_img: '',
            },
            imgFileList: [],
            userRules: {
                cooperation_name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
                cooperation_sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
                cooperation_phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }, { pattern: rulesPattern.phone, message: '手机号格式不正确', trigger: 'change' }],
                partner_company_id: [{ required: true, message: '请选择合作公司', trigger: 'blur' }],
                ceremony_hall_name: [{ required: true, message: '请输入仪式厅名称', trigger: 'blur' }],
                cooperation_id_num: [{ required: true, message: '请选择身份', trigger: 'blur' }],
            },
            isdisabled: false
        }
    },
    methods: {
        addNewFirm() {
            this.addform = {
                cooperation_name: '',
                nickname: '',
                cooperation_sex: '0',
                partner_company_id: '',
                cooperation_phone: '',
                cooperation_wx_num: '',
                cooperation_id_num: '',
                remarks: '',
                individual_img: '',
            },
                this.title = '新增合作人员'
            this.dialogFormVisible = true
        },
        uploadHttp(options) {
            const formData = new FormData();
            // 注意：这里我们使用Blob对象，以便可以指定文件名
            const file = new Blob([options.file], { type: options.file.type });
            // 对文件名进行UTF-8编码，使用encodeURIComponent处理非ASCII字符
            console.log('options', options.file.name);
            // const fileName = options.file.name
            const fileName = encodeURIComponent(options.file.name);
            formData.append(options.filename, file, fileName);
            const xhr = new XMLHttpRequest();
            xhr.open('POST', options.action, true);
            xhr.onload = function () {
                if (xhr.status >= 200 && xhr.status < 300) {
                    options.onSuccess(xhr.response);
                } else {
                    options.onError(xhr.response);
                }
            };
            xhr.send(formData);
        },
        sucessImg(res) {
            let responseObj = typeof res === 'string' ? JSON.parse(res) : res;
            this.$message.success(responseObj.msg)
            this.imgFileList.push({ ...responseObj, url: util.defaults.baseURL + 'files/' + responseObj.filename, name: responseObj.filename.split('-')[1] })
        },
        errorImg(err) {
            this.$message.error('文件上传失败')
        },
        beforeImg(file) {
            const maxSize = 100 * 1024 * 1024;
            if (file.size > maxSize) {
                this.$message.error('文件大小不能超过100MB');
                return false
            }
        },
        deleteImg(flie, flieList) {
            this.imgFileList = flieList
        },
        saveUsser() {
            this.$refs.userDetailFrom.validate((vail) => {
                if (vail) {
                    let imgArr = []
                    this.imgFileList.forEach(item => {
                        imgArr.push(item.filename)
                    })
                    this.addform.individual_img = imgArr.join(',')
                    if (this.title == '编辑合作人员') {
                        this.$api.subTeam(this.addform).then(res => {
                            this.$message.success(res.msg)
                            this.cancel()
                            this.$parent.getHallList()
                        }).catch((err) => {
                            this.$message.error(err.message)
                        })

                    } else {
                        this.$api.saveTeam(this.addform).then(res => {
                            this.$message.success(res.msg)
                            this.cancel()
                            this.$parent.getHallList()
                        }).catch(err => {
                            this.$message.error(err.message)
                        })
                    }
                }
            })
        },
        cancel() {
            // this.$refs.userDetailFrom.clearValidate()
            this.$refs.userDetailFrom.resetFields()
            this.imgFileList = []
            this.dialogFormVisible = false
            this.isdisabled = false
        },
        getDetail(id, val) {
            this.title = val
            this.imgFileList = []
            val == '合作人员详情' ? this.isdisabled = true : this.isdisabled = false
            this.$api.getTeamDetail(id).then(res => {
                this.addform = res.data
                if (res.data.individual_img == '' || res.data.individual_img == null) {
                    this.imgFileList = []
                } else {
                    let imgArr = res.data.individual_img.split(',')
                    imgArr.forEach(item => {
                        this.imgFileList.push({
                            url: util.defaults.baseURL + 'files/' + item,
                            name: item.split('-')[1],
                            filename: item
                        })
                    })
                }
                this.dialogFormVisible = true
            }).catch(err => {
                this.$message.error(err.message)
            })

        }
    },
    mounted() {

    }
}
</script>
<style lang="less" scoped>
.titleL2 {
    display: flex;
    align-items: center;
    justify-content: left;
    line-height: 20px;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
}

.titleL2::before {
    content: '';
    width: 5px;
    height: 20px;
    margin-right: 5px;
    background-color: #409eff;
}

.formWidth {
    width: 300px;
}

.el-form-item {
    padding-left: 40px !important;
    display: flex;
    align-items: center;
}

/deep/.el-form-item__label {
    line-height: 20px !important;
}

/deep/.el-form-item__content {
    margin-left: 20px !important;
}

.uploadDiv {
    width: 120px;
    height: 120px;
    border: 1px dashed #C0C4CC;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;

    i {
        font-size: 25px;
        color: #909399;
    }
}

.uploadDiv:hover {
    border-color: #409eff;

    i {
        color: #409eff;
    }
}

/deep/.el-form-item__content {
    width: 60% !important;
}
</style>